<template>
  <div class="all">
    <div class="runstory" ref="box" @scroll="scrolling" @click="runstory">
      <div
        class="autoplay"
        @click.stop="gospeedflag"
        v-show="speedflag == false"
      >
        点击开启自动播放
      </div>
      <div class="speed" @click.stop="goTouchstart($event)" v-show="speedflag">
        <div class="one">一倍速</div>
        <div class="two">二倍速</div>
        <div class="thrid">三倍速</div>
      </div>
      <div class="author" v-show="show == false">{{ author }}</div>
      <transition-group name="scroll">
        <div
          class="run-item"
          ref="boxitem"
          v-for="(r, i) in playlist"
          :key="r.id"
          :class="{ mt: i == playlist.length - 1 }"
        >
          <!-- :class="{left:r.position==0}"  -->
          <div class="story-artic" v-if="r.content_type == 0">
            <div class="desc" v-if="r.role_id == 0">{{ r.content }}</div>
            <div class="left" v-if="r.position == 0 && r.role_id != 0">
              <img v-lazy="r.role_img" class="lazyload-img roleimg-left" />
              <div class="rolename-left">{{ r.role_name }}</div>
              {{ r.content }}
            </div>
            <div class="right" v-if="r.position == 1 && r.role_id != 0">
              <img v-lazy="r.role_img" class="lazyload-img roleimg-right" />
              <div class="rolename-right">{{ r.role_name }}</div>
              {{ r.content }}
            </div>
          </div>
          <div
            class="story-audio"
            v-if="r.content_type == 2"
            @click.stop="play"
          >
            <div class="voice-icon">
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
              <i :class="{ pause: audioflag == true }"></i>
            </div>
            <!-- 点击{{text}} -->
            <audio ref="audio" :src="r.content" autoplay></audio>
          </div>
          <div
            class="story-video"
            v-if="r.content_type == 3"
            @click="playvideo()"
          >
            "视频"
            <video :src="r.content" controls width="80%" height="80%" />
            <div class="rolename-right">{{ r.role_name }}</div>
            <img v-lazy="r.role_img" class="lazyload-img roleimg-right" />
          </div>
          <div class="story-img" v-if="r.content_type == 1">
            <img
              v-lazy="r.content"
              @click.stop="previewImage(r.content)"
              class="lazyload-img"
            />
          </div>
          <!-- <div class="tick" v-if="btnflag">已到底部</div> -->
        </div>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { throttle } from "lodash-es";
export default {
  data() {
    return {
      show: false,
      oldScrollTop: 0,
      scrollFlag: true,
      playlist: [],
      listid: 0,
      flag: false,
      touchflag: false,
      timer: null,
      speedflag: false,
      text: "暂停",
      btnflag: false,
      audioflag: false,
    };
  },
  props: {
    roleList: Array,
    author: String,
  },

  created() {
    this.flag = true;
     clearInterval(this.timer);
     this.timer = null;
  },

  methods: {
    gospeedflag() {
      this.speedflag = true;
    },
    goTouchstart(e) {
      clearInterval(this.timer);
      this.touchflag = true;

      let speed = 0;
      if (e.target.className == "one") {
        speed = 1000;
        console.log(1);
      } else if (e.target.className == "two") {
        speed = 800;
        console.log(2);
      } else {
        speed = 600;
        console.log(3);
      }

      this.timer = setInterval(() => {
        this.scrollToBottom();
        if (this.roleList.length - 1 == this.playlist.length) {
          this.btnflag = true;
        }
        this.listid = this.listid + 1;
        this.roleList.filter((r, i) => {
          if (i == this.listid && i <= this.roleList.length) {
            this.playlist.push(r);
          }
        });
      }, speed);
    },
    previewImage(url) {
      console.log(1);
      this.url = url;
      this.$preview({
        urls: [this.url],
      });
    },
    play() {
      this.$nextTick(() => {
        this.audioflag = !this.audioflag;
        if (this.audioflag == false) {
          this.$refs.audio[0].play();
          this.text = "暂停";
        } else {
          this.$refs.audio[0].pause();
          this.text = "播放";
        }
      });
    },
    runstory: throttle(function () {
      this.speedflag = false;
      this.touchflag = false;
      //  console.log(this.roleList);
      clearInterval(this.timer);
      this.timer = null;

      this.show = true;
      if (this.roleList.length - 1 == this.playlist.length) {
        this.btnflag = true;
      }
      if (this.roleList.length == 1) {
        this.playlist = this.roleList;
      } else {
        this.listid = this.listid + 1;
        this.roleList.filter((r, i) => {
          if (i == this.listid && i <= this.roleList.length) {
            this.playlist.push(r);
          }
        });

        this.scrollToBottom();
      }
      // console.log(this.playlist);
    }, 400),

    scrollToBottom() {
      this.$nextTick(() => {
        let height = this.$praseStrEmpty(this.$refs.boxitem.offsetHeight );
        let count = Math.floor(this.$refs.box.scrollHeight / height);
        this.$refs.box.scrollTop =
          this.$refs.box.scrollHeight == height * this.$refs.boxitem.length
            ? this.$refs.box.scrollHeight + height * count
            : this.$refs.box.scrollHeight;
      });
    },
    scrolling() {
      let scrollTop = this.$refs.box.scrollTop;
      let scrollStep = scrollTop - this.oldScrollTop;
      this.oldScrollTop = scrollTop;
      if (scrollStep < 0) {
        this.scrollFlag = true;
        this.$emit("scrollFlag", this.scrollFlag);
      } else {
        this.scrollFlag = false;
        this.$emit("scrollFlag", this.scrollFlag);
      }
    },
  },
  beforeDestroy() {
    this.timer = null;
  },
};
</script>

<style lang="scss" scoped>
.all {
  margin-bottom: 100px;
}
.runstory {
  pointer-events: auto;
  position: fixed;
  top: 70px;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 150;
  overflow: auto;
  background-color: transparent;
  padding-bottom: 10px;

  color: rgb(187, 183, 183);
  .author {
    position: fixed;
    top: 10%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 14px;
  }
  .autoplay {
    position: fixed;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    border-radius: 20px;
    height: 30px;
    width: 200px;
    background-color: black;
    text-align: center;
    line-height: 30px;
  }
  .speed {
    position: fixed;
    display: flex;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 20px;
    border-radius: 20px;
    height: 30px;
    width: 200px;
    background-color: black;
    text-align: center;
    line-height: 30px;

    div {
      flex: 1;
      border-right: 1px solid #fff;
    }

    .thrid {
      border: 0;
    }
  }
  .run-item {
    display: table;
    // flex-direction: column;
    text-align: center;
    width: 100vw;
    line-height: 25px;
    vertical-align: bottom;
    margin-top: 30px;

    // .tick {
    //   color: brown;
    //   font-size: 20px;
    //   font-weight: 600;
    // }

    div {
      display: table-cell;
    }

    &.mt {
      margin-bottom: 100px;
    }

    .story-artic {
      font-size: 8px;
      width: 100vw;
      height: 70px;
      display: block;

      .desc {
        width: 100vw;
        height: 70px;
        padding: 0 10px;
        text-align: center;
        font-weight: 600;
        color: white;
        text-shadow: 0 0 10px rgb(128, 87, 211), 0 0 20px rgb(128, 87, 211),
          0 0 30px rgb(128, 87, 211), 0 0 40px rgb(128, 87, 211);
      }

      .left {
        background-color: #fff;

        // min-width: 150px;
        float: left;
        max-width: 250px;
        font-size: 15px;
        padding: 10px 15px;
        // height: 70px;
        border-radius: 10px;
        position: relative;
        color: black;
        left: 40px;
        border-top-left-radius: 0;
        box-sizing: border-box;

        .roleimg-left {
          position: absolute;
          left: -30px;
          top: -20px;
          width: 25px;
          height: 25px;
          border-radius: 999px;
        }

        .rolename-left {
          position: absolute;
          left: 0;
          width: 80px;
          top: -25px;
          font-size: 8px;
          color: rgb(227, 182, 182);
          text-align: left;
          font-weight: 600;
        }
      }

      .right {
        background-color: rgb(75, 166, 75);
        max-width: 250px;
        font-size: 15px;
        padding: 10px 15px;
        position: relative;
        color: black;
        border-radius: 10px;
        right: 40px;
        border-top-right-radius: 0;
        float: right;
        box-sizing: border-box;
        .roleimg-right {
          position: absolute;
          right: -30px;
          top: -20px;
          width: 25px;
          height: 25px;
          border-radius: 999px;
        }
        .rolename-right {
          position: absolute;
          right: 0;
          top: -25px;
          font-size: 8px;
          width: 80px;
          text-align: right;
          color: rgb(181, 146, 146);
          font-weight: 600;
        }
      }
    }
    .story-audio {
      width: 100vw;
      height: 50px;
      // background-color: black;

      .voice-icon {
        display: flex;
        justify-content: space-between;
        flex: 0 0 13px;
        margin-right: 12px;
        padding-bottom: 2px;
        width: 83px;
        height: 20px;
        position: absolute;
        left: 45%;
        top: 20%;
        // background-color: #fff;
        i {
          display: block;
          width: 3px;
          height: 8px;
          background: red;
          margin-left: 5px;
          transform-origin: left bottom;
          &:nth-child(1),
          &:nth-child(4),
          &:nth-child(7) {
            animation: besmall 2s linear infinite;
          }

          &:nth-child(2),
          &:nth-child(5),
          &:nth-child(8) {
            animation: besmall 2s linear 0.65s infinite;
          }

          &:nth-child(3),
          &:nth-child(6),
          &:nth-child(9) {
            animation: besmall 2s linear 1.2s infinite;
          }
        }

        .pause {
          display: block;
          width: 3px;
          height: 8px;
          background: red;
          margin-left: 5px;
          transform-origin: left bottom;
          &:nth-child(1),
          &:nth-child(4),
          &:nth-child(7) {
            animation: none;
            transform: scaleY(1.8);
          }

          &:nth-child(2),
          &:nth-child(5),
          &:nth-child(8) {

           animation: none;
            transform: scaleY(0.8)
          }

          &:nth-child(3),
          &:nth-child(6),
          &:nth-child(9) {
            animation: none;
            transform: scaleY(1.8);
          }
        }
      }

      audio {
        text-align: center;
        display: inline-block;
        width: 100%;
        height: 80%;
      }
    }

    .story-video {
      width: 80vw;
      height: 80vh;
      position: relative;
      right: 30px;

      .roleimg-right {
        position: absolute;
        right: -30px;
        top: -20px;
        width: 25px;
        height: 25px;
        border-radius: 999px;
      }
    }
    .story-img {
      width: 100vw;
      height: 200px;
      img {
        text-align: center;
        display: inline-block;
        width: 200px;
        height: 200px;
      }
      &.hide {
        display: none;
      }
    }
  }

  .tick {
    position: fixed;
    bottom: 40px;
    left: 50%;
    transform: translateY(-50%);
    color: black;
    font-size: 17px;
  }

  .scroll-enter,
  .scroll-leave-to {
    transform: translateY(-10%);
  }

  .scroll-enter-active,
  .scroll-leave-active {
    transition: all 0.2s linear;
  }

  .scroll-enter-to,
  .scroll-leave {
    transform: translateY(0);
  }
}

@keyframes besmall {
  0% {
    transform: scaleY(1.8);
  }
  50% {
    transform: scaleY(0.5);
  }
  100% {
    transform: scaleY(1.8);
  }
}
</style>